<template>
  <div id="app">
    <!-- 头部 -->
    <Topbar></Topbar>
    <!-- 导航 -->
    <Header></Header>
    <router-view />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录模态框 -->
    <!-- 需要一个状态控制login是否显示 
        该状态多个组件都需要使用到 因此存储在vuex中
       -->
    <Login v-show="isShowLoginModel"></Login>
  </div>
</template>
<script>
import Topbar from "./components/TopBar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
// import axios from "axios";
import { JingPinAPI } from "@/request/Api";
import Login from "./components/Login.vue";
import { mapState } from "vuex";

export default {
  components: {
    Topbar,
    Header,
    Footer,
    Login,
  },
  computed: {
    ...mapState({
      // 属性：state=>state.模块名称.属性名
      isShowLoginModel: (state) => state.showModel.isShowLoginModel,
    }),
  },
  // 用生命钩子检测
  async created() {
    // 缺点:
    // 1. 服务器url地址都一样,每个组件调用时都需要复制过去  --request
    //    一旦接口地址发生变化,所有调用了接口的组件都需要修改.  --统一接口管理api.js
    // 2. 每次请求时都需要手动编写config携带token (多个组件携带代码重复) -- 拦截器
    // 3. 优化then()写法. async+await

    /* axios.get(url[,config])
    axios.get("/products/recommend").then(
    JingpinAPI().then(
      (res) => {
        console.log("res2:", res); //在network中看 请求地址,响应结果.
      },
      (err) => {
        console.log(err);
      }
    ); */

    let res = await JingPinAPI();
    // console.log("res3、async.await:", res);
  },
};
</script>

<style lang="less">
</style>
